<template>
  <div class="goods">
    <img
      :src="record.imgUrl ? record.imgUrl : 'https://img.bzhz.jnbygroup.com/cloth.png'"
      alt=""
      :style="{ cursor: showDetail ? 'pointer' : 'default' }"
      @click="getGoodsDetail(record.outId, record.productId)"
    />
    <div class="right">
      <h3 class="title">
        <ellipsis :length="24" tooltip> {{ record.productName }}</ellipsis>
        <a-tag color="orange" v-if="record.eb && showEb" style="margin-left:8px">内淘</a-tag>
      </h3>
      <p class="detail">
        <span>{{ record.productBrand }} | {{ record.sku || record.skuCode }}</span>
        <br />
        <span>颜色：{{ record.productColor }}/{{ record.productColorNo }}</span>
        <span>尺码：{{ record.productSize }}</span>
      </p>
    </div>
  </div>
</template>
<script>
import { Ellipsis } from '../index'
export default {
  props: {
    record: {
      type: Object,
      default: null
    },
    showDetail: {
      type: Boolean,
      required: false,
      default: false
    },
    showEb: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  components: {
    Ellipsis
  },
  methods: {
    getGoodsDetail(productId, skuId) {
      if (this.showDetail) {
        this.$emit('openGoodsDetail', productId, skuId)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.goods {
  display: flex;
  img {
    min-width: 80px;
    height: 80px;
    object-fit: scale-down;
    border: 1px dashed #cdcdcd;
    margin-right: 12px;
    background: white;
    z-index: 2;
    display: block;
  }
  .right {
    text-align: left;
    .detail {
      color: #666;
      span {
        display: inline-block;
        margin-left: 12px;
      }
    }
    .title {
      margin-left: 12px;
      display: flex;
      align-items: center;
    }
  }
}
</style>

